<template>
	<view class="home" :style="{backgroundImage:'url('+nowBackground+')'}">
		<view style="position: absolute;top: 5%;left: 5%;z-index: 99999;">
			<u-icon name="grid-fill" color="#505051" size="28" style="position: fixed;" @click.stop="openPopup"></u-icon>
		</view>
		<swiper :current="nowTabbar" vertical @change="swiperChange" style="height: 100%;">
			<template v-for="(item,index) in list">
				<swiper-item :item-id="index">
					<!-- <image :src="item" style="width: 100vw;height: 100vh;position: fixed;z-index: 1;opacity: 0.85;"></image> -->
					<view class="content">
						<view class="content-">{{item.content}}</view>
					</view>

				</swiper-item>
			</template>
		</swiper>
		<u-popup :show="status.popupShow" mode="left" @close="popupClose" bgColor="transparent">
			<view class="popup">
				<view class="popup-item" @click="$utils.run('../home/backgroundSet'),status.popupShow=false">背景設置</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				status: {
					popupShow: false
				},
				nowTabbar: 0,
				list: [{
					content: '山川异域，风月同天'
				}, {
					content: '祸兮福所倚，福兮祸所伏'
				}, {
					content: '有光的地方就有阴影，而光芒越是耀眼,阴影就越黑暗'
				}],
				/* 当前背景 */
				nowBackground: this.$utils.getUserBackground(),
				// list: [
				// 	'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.leadip.com%2Fd%2Ffile%2Fp%2F2021%2F05-15%2F1621044372423_1.jpeg&refer=http%3A%2F%2Fwww.leadip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645351692&t=72aa0bda3e5174230b65b7ecb9962196',
				// 	'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201506%2F20%2F20150620221840_5NuiA.thumb.400_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645352256&t=b6442d13176784f2367206d546c0223f',
				// 	'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-07-23%2F5f1931e75db5f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645338913&t=467b5d65bd018a389fd04b28d5c65d68',
				// ]
			}
		},
		// watch:{
		// 	nowBackground(val){
		// 		console.log(val)
		// 	}
		// },
		created() {
			this.getBackground();
		},
		methods: {
			nowBackgroundChange() {
				this.nowBackground = this.$utils.getUserBackground()
			},
			/* 查询用户设置的背景图片，没有就默认用列表第一个 */
			getBackground() {
				this.$cloudUtils.get('user-background-set', {
					userId: this.$utils.getUserId()
				}).then((res) => {
					if (res.data.length > 0) {
						this.$utils.setUserBackground(res.data[0].url)
					}
				}).catch((res) => {})
			},
			openPopup() {
				this.status.popupShow = !this.status.popupShow;
			},
			popupClose() {
				this.status.popupShow = false;
			},
			swiperChange(val) {
				this.nowTabbar = val.detail.current;
			}
		}
	}
</script>

<style lang="less">
	.home {
		height: 100vh;
		background: #000;
		// background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-42f61864-8c3b-41c7-a6eb-875b941dfe63/b4805bfb-7810-4ed4-a57d-0f7daa41a495.jpeg');
		background-size: 100% 100%;
		transition: background-image 1.5s ease-out;

		.content {
			position: fixed;
			z-index: 2;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 50rpx;
			width: calc(100vw - 100rpx);
			
			.content- {
				color: #fff;
				font-family: cursive;
				font-size: 45rpx;
				padding: 38rpx;
				border-radius: 6pt;
				background-color: rgba(59, 58, 58, 0.5);
				// opacity: 0.7;
				// animation: animate 0.5s linear infinite;
			}
		}

		@keyframes animate {

			0%,
			100% {
				text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
			}

			25% {
				text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
			}

			50% {
				text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
			}

			75% {
				text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
			}
		}

		.popup {
			height: 100%;
			width: 100%;
			background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-42f61864-8c3b-41c7-a6eb-875b941dfe63/14222748-0daf-4e03-9070-01520f6f5639.jpeg');
			background-size: 100%;
			opacity: 0.5;
			padding: 0 50rpx;
			padding-top: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: start;

			.popup-item {
				color: #FFFFFF;
				text-align: center;
				font-size: 38rpx;
				margin-bottom: 20rpx;
			}
		}

	}
</style>
